<template>
        <div class="w-100 h-100">
            <div class="w-100 h-10 d-flex justify-content-end"> 
               
                <lineLabel
        :shapeColor="'#B8EB8F'"
        :text="'污水净化率'"
        >
        </lineLabel>
        <FakeLegend
        style="margin: auto 30px auto 0px"
          :color="colorSingleList"
          :text="['净水能力']"
        >
        </FakeLegend>
            </div>
            <div class="w-100 h-90" >
              <div id="jin1" style="width: 100%; height: 100%"></div>
            </div>
        </div>
       
</template>
    
<script setup lang='ts'>
import * as echarts from "echarts";
    import lineLabel from '@/components/project/lineLabel.vue';
import { useFunc } from "@/hook/useFunc";
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});
  const colorSingleList = [
    "rgba(3, 230, 254, 1)", 
  ];
  let yaxisData :any 
let yaxisData1 :any 
  onMounted(() => {
   yaxisData=props.echartsData[0]
   yaxisData1=props.echartsData[1]
let option :any= {
   grid: {
      left: "3%",
      right: "4%",
      bottom: "20%",
      top: "14%",
      containLabel: true,
   },
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(28,64,81,0.7)",
      borderColor: "transparent",
      textStyle: {
        color: "white",
        fontSize: 20,
      },
  
    },
   //你的代码
   xAxis: {
      type: "category",
      data: ['生活污水', '工业废水', '雨水'],
      axisLabel: {
        fontSize: 20,
        color: "#667A8E",
            fontFamily: "OPPOSans-Regular",
      },
      axisTick: {
         lineStyle: {
            color: "#C7CBD1",
         },
      },
      axisLine: {
         lineStyle: {
            color: "#C7CBD1",
         },
      },
   },
   yAxis: [
      {
         name:'%',
      
         type: "value",
         nameTextStyle: {
            color: "#8994A3",
            fontSize: 20,
         },
         axisLabel: {
          fontSize: 20,
            color: '#667A8E',
         formatter: "{value}" + '%',
         },
         splitLine: { // 配置分割线
            show: true,
            lineStyle: {
                color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
                type: 'solid' // 实线
            }
        }
      },
      {
         name:'万立方米/日',
         type: "value",
         position: "right",
         splitLine: {
            show: false,
         },  nameTextStyle: {
            color: "#8994A3",
            fontSize: 20,
         },
         axisLabel: {
          fontSize: 20,
            color: '#667A8E',
         },
      }
   ],
   series: [
      {
         name: "污水利用率",
         type: "bar",
         barWidth: 26,
        itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color:'rgba(92, 225, 255, 1)', // 顶部颜色
          },
          {
            offset: 0.01,
            color: 'rgba(92, 225, 255, 0.9)', // 接近底部的颜色
          },
          {
            offset: 1,
            color: 'rgba(92, 225, 255, 0)', // 底部颜色，透明
          },
        ]),
      },
         data: yaxisData,
         yAxisIndex: 0
      },
      {
         name: "净水能力万立方米/日",
         type: "line",
         data: yaxisData1,
         yAxisIndex: 1,
         color: '#B8EB8F',
         areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(184, 235, 143, 0.8)' // 颜色渐变起始颜色
                }, {
                    offset: 1,
                    color: 'rgba(184, 235, 143, 0)' // 颜色渐变结束颜色
                }])
            }
        }
         
      },
   ]
};
//分割两侧的坐标轴
let maxY = 0
const computedYData = () => {

   let arr1:any = [],
      arr2:any = []
   option.series.map((item:any) => {
      if (item.type == "bar") {
         arr1.push(...item.data)
      } else {
         arr2.push(...item.data)
      }
   })
   let max1 = Math.max(...arr1)
   let max2 = Math.max(...arr2)
   let intervalY1 = Math.ceil(max1 / 6)
   let intervalY2 = Math.ceil(max2 / 6)
   if (max1 > max2) {
      maxY = max1
   } else {
      maxY = max2
   }
   option.yAxis.map((item:any, index:any) => {
      item.splitNumber = 6
      let interval
      if (index == 0) {
         interval = intervalY1
      } else {
         interval = intervalY2
      }
      item.interval = interval
      item.max = interval * 6
   })
}
computedYData()

//设置参考线
let flag = false
const setLine = (value:any) => {
   if (flag) {
      if (maxY < value) {
         option.yAxis[0].max = value
         option.yAxis[0].interval = Math.ceil(value/6)
      }
      option.series[0].markLine = {
         data: [
            {
               yAxis: value, // 自定义值
               label: {
                  // 不显示基准线名称
                  show: true,
                  position: "insideEndTop",
                  backgroundColor: "#FFECE8",
                  color: "#E93838",
                  padding: [2, 4, 0],
                  height: 20,
                  lineHeight: 20,
                  fontSize: 12,
                  formatter(params:any) {
                     console.log(params)
                     return "合格：" + params.value + "万元"
                  },
               },
               lineStyle: {
                  color: "#E93838",
               },
            },
         ],
      }
   } else {
      delete option.yAxis[0].max
      delete option.yAxis[0].interval
      option.series[0].markLine = {}
   }
}
flag = true
setLine(750)
let myChart = echarts.init(document.getElementById("jin1") as HTMLElement);

setTimeout(() => {
   //取消参考线
   flag = false
   myChart.clear()
   setLine(750)
   // useFunc().setDefaultOption(myChart)
   myChart.setOption(option)
   
}, 10)

// myChart.setOption(option);
});
</script>
    
<style>
    
</style>